<template>
  <Card size="small" class="share-card">
    <template #extra>
      <Button type="primary" shape="round" @click="edit()"><PlusOutlined /> 添加</Button>
    </template>
    <Table :columns="columns" :scroll="{ x: 800, y: contentHeight - 40 }" @resizeColumn="resizeColumn" :pagination="false" :data-source="configs" size="small" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'op'">
          <div class="btn-group">
            <Button type="primary" @click="edit(record)"><EditOutlined /> 修改</Button>
            <Button type="primary" @click="remove(record)" danger><DeleteOutlined /> 删除</Button>
          </div>
        </template>
      </template>
    </Table>
  </Card>
  <Modal v-model:visible="showModal" @ok="save" :mask-closable="false" :centered="true" :width="720" :model="currentConfig" title="配置详情">
    <Form layout="horizontal" :label-col="{ style: { width: '140px' } }">
      <Form.Item label="名称">
        <Input v-model:value="currentConfig.name" :disabled="!!currentConfig.id" placeholder="名称" />
      </Form.Item>
      <Form.Item label="配置信息">
        <Input.TextArea v-model:value="currentConfig.value" :auto-size="{ minRows: 6 }" placeholder="配置信息" />
      </Form.Item>
      <Form.Item label="配置描述信息">
        <Input v-model:value="currentConfig.description" placeholder="配置描述信息" />
      </Form.Item>
    </Form>
  </Modal>
</template>
<script setup>
  import { ref, inject, reactive, toRaw, onMounted } from 'vue';
  import { Button, Card, Modal, Input, Form, Table } from 'ant-design-vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  const $http = inject('$http');
  const $modal = inject('$modal');
  const $message = inject('$message');

  const showModal = ref(false);
  const contentHeight = ref(400);
  const configs = ref([]);
  const currentConfig = reactive({});

  const columns = reactive([
    {
      title: '序号',
      width: 40,
      align: 'center',
      customRender: ({ record, index }) => {
        return index + 1;
      }
    },
    { title: '名称', width: 100, dataIndex: 'Name', ellipsis: true, resizable: true },
    { title: '配置信息', width: 300, dataIndex: 'Value', ellipsis: true, resizable: true },
    { title: '描述信息', width: 180, dataIndex: 'Description', ellipsis: true, resizable: true },
    { width: 120, key: 'op', fixed: 'right' }
  ]);

  function resizeColumn(w, col) {
    col.width = w;
  }

  function getConfigs() {
    $http.get('/api/trac/configs').then(res => {
      configs.value = res.datas;
    });
  }

  function edit(record) {
    showModal.value = true;

    let val = record || {};

    currentConfig.id = val.Id;
    currentConfig.name = val.Name;
    currentConfig.value = val.Value;
    currentConfig.description = val.Description;
  }

  function save() {
    $http.post('/api/trac/save', toRaw(currentConfig)).then(res => {
      if (res.success) {
        showModal.value = false;

        getConfigs();

        return;
      }

      $message.error('出现错误，' + res.message);
    });
  }

  function remove(record) {
    $modal.confirm({
      title: '警告',
      content: `是否确定删除分类为【${record.Name}】的配置项？`,
      onOk() {
        $http.delete(`/api/trac/${record.Id}`).then(res => {
          if (res.success) {
            showModal.value = false;

            setTimeout(getConfigs(), 500);

            return;
          }

          $message.error('出现错误，' + res.message);
        });
      }
    });
  }

  onMounted(() => {
    getConfigs();
  });
</script>
<style lang="less" scoped></style>
